<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 董灌磊
  Date: 2024/4/7
  Time: 11:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <div class="layui-form" id="searchForm" lay-filter="searchForm">
        <div class="layui-inline">
            <label class="layui-form-label">车位状态:</label>
            <div class="layui-input-block">
                <select name="parkingstateid" id="parkingstateid">
                    <option value="0">请选择状态</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">停车场名:</label>
            <div class="layui-input-block">
                <select name="parkid" id="parkids">
                    <option value="0">请选择小区</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" onclick="search()" >查询</button>
        </div>
        <div class="layui-inline">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <table id="parkTable" lay-filter="parkTables"  class="layui-table layui-table-hover"></table>
    <%--添加页面--%>
    <div id="add" style="display:none;padding:20px">
        <form class="layui-form" id="addForm" lay-filter="addForm">
            <div class="layui-form-item">
                <label class="layui-form-label">停车场名:</label>
                <div class="layui-input-block">
                    <select name="parkid" id="parkid">
                        <option value="">请选择小区</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车位编号:</label>
                <div class="layui-input-block">
                    <input type="text" name="parkingcode" placeholder="" required  class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <%-- 卖出页面--%>
    <div id="sell" style="display:none;padding:20px">
        <form class="layui-form" id="sellForm" lay-filter="sellForm">
            <input type="hidden"name="lotid" id="parklotid">
            <div class="layui-form-item">
                <label class="layui-form-label">业主手机号:</label>
                <div class="layui-input-block">
                    <input type="text" name="ownerphone" id="phone" placeholder="请输入业主手机号" required  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车牌号:</label>
                <div class="layui-input-block">
                    <input type="text" name="carno" id="carno" placeholder="请输入车牌号" required  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">租/售:</label>
            <div class="layui-input-block">
                <select name="parkingstateid" id="zusell" lay-filter="zusell">
                    <option value="3">请选择状态</option>
                    <option value="2">出租</option>
                    <option value="1">售出</option>
                </select>
            </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车位价格:</label>
                <div class="layui-input-block">
                    <input type="text" name="price" id="price" value="0" required readonly="true" style="background:#CCCCCC"  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" id="endtime">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">停车场名:</label>
                <div class="layui-input-block">
                    <select name="parkid" id="parking">
                        <option value="0">请选择停车场</option>
                    </select>
            <%--        <input type="text" name="parkid" id="parks" required readonly="true" style="background:#CCCCCC"  class="layui-input">--%>
                </div>
            </div>
            <input type="reset" id="reset" style="display: none">
        </form>
    </div>
</div>
<script>
    var values;
        layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        // select 事件
        form.on('select(zusell)', function(data){
             values = data.value; // 获得被选中的值
            $.post("/park/selectallState")
                .then(({data})=>{
                    $(data).each(function (i,e){
                        if(values==2 && e.id==2){
                            $("#endtime").children().remove();
                            $("#price").val(e.price+"/月")
                            $(" <label class='layui-form-label'>结束时间:</label>").appendTo($("#endtime"))
                            $(" <div class='layui-input-block' id='endtimes'></div>").appendTo($("#endtime"))
                            var endtime = $("<input type='date' name='endtime' required class='layui-input'>");
                            endtime.appendTo($("#endtimes"));
                        }else if(values==1 && e.id==1){
                            $("#endtime").children().remove();
                            $("#price").val(e.price+"/永久")
                        }
                    })

                });
        });

    });
</script>
<%--头部工具栏，添加--%>
<script type="text/html" id="headTool">
    <button class="layui-btn" onclick="add()">添加车位</button>
</script>
<script>
    let $=layui.$
    $.get("/park/parklist")
        .then(({data})=>{
            //data:数组
            $(data).each(function (i,e){
                let option = $("<option value='"+e.id+"'>"+e.parkcode+"</option>");
                $("[name=parkid]").append(option);
            });
            //重新渲染下拉列表
            layui.form.render('select');
        });
    $.get("/park/selectallState")
        .then(({data})=>{
            //data:数组
            $(data).each(function (i,e){
                let option = $("<option value='"+e.id+"'>"+e.parstatename+"</option>");
                $("#parkingstateid").append(option);
            });
            //重新渲染下拉列表
            layui.form.render('select');
        });
    layui.use(function (){
        let table=layui.table;
        table.render({
            id:"one",
            elem:"#parkTable",
            url:"/park/parkinglotlist",
            toolbar: "#headTool",
            page:true,
            limit : 6,
            limits : [6,12,18,24],
            even:true,
            cols:[[
                {field:'number',align: 'center',type:'numbers',title:"编号"},
                {field:'id',align: 'center',hide:true,title:"编号"},
                {field:'parkingcode',align: 'center',title:"车位编号"},
                {field:'parkingstateid',align: 'center',title:"车位状态",templet(r){
                    return r.parkingstate.parstatename
                    }},
                {field:'parkid',align: 'center',title:"所属停车场",templet(r) {
                        return r.park.parkcode;
                    }},
                {field:'parkingstateid', title:'操作', templet(r) {
                       if(r.parkingstate.id==3){
                           return "<button id='lotid' lay-event='sell' class='layui-btn layui-btn-xs'>租/售</button>"
                       }else if(r.parkingstate.id==2){
                           return "<a class='layui-btn layui-btn-xs layui-btn-normal'lay-event='recycle'>已出租</a> <button id='lotid' lay-event='carhetong' class='layui-btn-danger layui-btn-xs'>合同</button>"
                       }else if(r.parkingstate.id==4){
                           return "<a class='layui-btn layui-btn-xs layui-btn-normal'>已占用</a>"
                       }else{
                           return "<button id='lotid' lay-event='carhetong' class='layui-btn-danger layui-btn-xs'>合同</button>"
                       }
                    }}
            ]]
        })
        //监听行工具栏事件
        table.on("tool(parkTables)",function (obj){
            if(obj.event == "sell"){
                sell(obj)
            }else if(obj.event == "recycle"){
                recycle(obj)
            }else if(obj.event=='carhetong'){
                carhetong(obj);
            }
        })
    })
    //点击去查询
    function search(){
        //获取表单的值,表单序列化
        var where = layui.form.val('searchForm');
        console.log(where)
        //条件查询，重载表格因为键和值都是where，所以可以值保留键
        layui.table.reload('one',{
            page: {
                curr:1
            },
            where:where
        });
    }
    //点击添加
    function add(){
        $("#addForm")[0].reset();
        layui.layer.open({
            type : 1,
            title : "提示",
            area:["500px","300px"],
            content: $("#add"),
            icon : 3,
            btn:["确定","取消"],
            yes(){
                //通过表单序列化，获取输入的内容
                let addForm = layui.form.val("addForm");
                if(addForm.parkid==0||addForm.parkid==null||addForm.parkid==''){
                    layui.layer.msg("请填写完整")
                    return;
                }else if(addForm.parkingcode==null||addForm.parkingcode==''){
                    layui.layer.msg("请填写完整1")
                    return;
                }else {
                    //发送ajax请求
                    $.post("/park/addparkinglot",addForm)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('one');
                        });
                }

            }
        });
    }
    /*租卖出车位方法*/
  function  sell(obj){
      $("#reset").trigger("click");
      console.log(obj.data.park.id)
      $("#parklotid").val(obj.data.id)
      $("[name=parkid]").val(obj.data.park.id)
      //渲染
      layui.form.render("select");
       layui.layer.open({
          type : 1,
          title : "提示",
          area:["500px","500px"],
          content: $("#sell"),
          icon : 3,
          btn:["确定","取消"],
          yes(){
                  /*租出卖出*/
                      //通过表单序列化，获取输入的内容
                      let sellForm = layui.form.val("sellForm");
                      var index=sellForm.price.indexOf("/")
              var price=sellForm.price.substring(0,index);
                      sellForm.price=price;
                //发送ajax请求
                $.post("/park/updateparkstate",sellForm)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.closeAll();
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
          }
      });
  }
  /*收回车位方法*/
  function  recycle(){

    }

    layui.use(["jquery"],function(){
        var $=layui.jquery;
        $("#phone").on('blur',function(){
            var phone = $(this).val();
            $.post("/owner/count?phone="+phone)
                .then(({msg})=>{
                    console.log(msg)
                    layui.layer.msg(msg);
                })
        })
    });

    /**
     * 车位合同
     */
    function carhetong(obj){
        var data = obj.data.id;
        console.log(data)
        layui.layer.open({
            title:"租赁合同",
            content:"/park/carhetong?id="+data,
            type:2,
            area:["800px","500px"],
            maxmin:true
        })
    }
</script>
</body>
</html>
